<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>节流</title>
    <style>
        .灰盒子 {
            width: 500px;
            height: 500px;
            background-color: #ccc;
            color: #fff;
            text-align: center;
            font-size: 100px;
        }
    </style>
</head>
<body>
<h3>节流</h3>
<p>
    所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数
</p>
<p>
    假如一张轮播图完成切换需要300ms， 不加节流效果，快速点击，则嗖嗖嗖的切换 <br>
    加上节流效果， 不管快速点击多少次， 300ms时间内，只能切换一张图片。
</p>
<a href="https://www.bilibili.com/video/BV1Y84y1L7Nn/?p=198&spm_id_from=pageDriver&vd_source=cb928a955f1123af004a2e3158113ea7">
    节流 视频讲解
</a>
<hr>

<!--
案例:
利用节流来处理-鼠标滑过盒子显示文字
要求： 鼠标在盒子上移动，里面的数字就会变化+1
利用节流的方式， 鼠标经过，500ms ，数字才显示
-->
<!--
实现方法有2个
1. 使用lodash库, 实现防抖
2. 自己手写.....
-->

<div class="灰盒子"></div>

<script src="lodash.min.js"></script>
<script>
    let i = 1 // 这个是显示在,盒子里的数字
    // 获取DOM元素
    const 盒子 = document.querySelector('.灰盒子')

    function 鼠标移动() {
        盒子.innerHTML = i++ // 盒子里显示数字,并且增加
    }


    // 方法1,简单吧
    // 监控 经过事件.  lodash库里, _.throttle节流函数, 多少时间内, 只执行一个函数
    // 盒子.addEventListener('mousemove', _.throttle(鼠标移动, 1000))


    // 方法2,自己手写.......
    function 节流(鼠标移动, 经过时间) {
        let 延时器序列号 = null // 延时器变量

        // return 函数返回一个函数
        return function () {
            // 检查是否有,延时器,  如果没有开启延时器
            if (!延时器序列号) {
                // 开启延时器
                延时器序列号 = setTimeout(function () {
                    鼠标移动() // 调用函数
                    // 时间到了,在关闭延时器
                    延时器序列号 = null // 这里赋值null, 而不是使用 clearTimeout(延时器序列号) // 关闭延时器
                }, 经过时间)
            }
        }
    }

    盒子.addEventListener('mousemove', 节流(鼠标移动, 1000))

    // 节流((鼠标移动, 1000) = return function () {} // 我们要的是return 返回的函数
    // 为什么, 延时器序列号 = null   因为在 setTimeout代码里面,是不能关闭延时器的. 所以使用赋值 null 的形式, 清除延时器
</script>


</body>
</html>